<template>
  <div class="demo">
    <TransparentHeader color="#892cfe" @pageBack="closePage" @pageRefresh="refreshPage" @pageClose="closePage"></TransparentHeader>
    <div class="banner van-ellipsis">
      这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner这是banner
    </div>
    <van-tabs ref="tabs" v-model="active" title-active-color="red" title-inactive-color="#892CFE" sticky scrollspy offset-top="21.333vw">
      <van-tab title="新人专享" class="content" :class="{'active': active==0}">
        <van-cell-group title="新人专享">
          <van-cell
              v-for="item in $router.options.routes"
              :key="item.path"
              is-link
              :to="{ path: item.path, query: $route.query }"
              :title="item.path"
              :value="item.meta && item.meta.title"
          />
        </van-cell-group>
      </van-tab>
      <van-tab title="全员补贴" class="content" :class="{'active': active==1}">
        <van-cell-group title="全员补贴">
          <van-cell
              v-for="item in $router.options.routes"
              :key="item.path"
              is-link
              :to="{ path: item.path, query: $route.query }"
              :title="item.path"
              :value="item.meta && item.meta.title"
          />
        </van-cell-group>
      </van-tab>
      <van-tab title="生活红包" class="content">
        <van-cell-group title="生活红包">
          <van-cell
              v-for="item in $router.options.routes"
              :key="item.path"
              is-link
              :to="{ path: item.path, query: $route.query }"
              :title="item.path"
              :value="item.meta && item.meta.title"
          />
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs, CellGroup, Cell } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(CellGroup);
Vue.use(Cell);
export default {
  name: 'index',
  data() {
    return {
      active: 0
    }
  },
  methods: {
    refreshPage() {
      window.location.href = window.location.href
    },
    closePage() {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
.demo {
  min-height: 100vh;
  .banner {
    height: 500px;
    font-size: 30px;
    text-align: center;
    background: url('~@/assets/logo.png') center no-repeat;
  }
  .content{
    padding-top: 0;
    &.active {
      //padding-top: 21.333vw;
    }
  }
}
</style>
